<template>
  <div class="g-ft">
    <div class="m-ft">
      <div class="warp">
        <div class="copy">
          <p class="link">
            <a href="#">服务条款</a><span class="line">|</span>
            <a href="#">隐私政策</a><span class="line">|</span>
            <a href="#">儿童隐私政策</a><span class="line">|</span>
            <a href="#">版权投诉</a><span class="line">|</span>
            <a href="#">投资者关系</a><span class="line">|</span>
            <a href="#">广告合作</a><span class="line">|</span>
            <a href="#">秉正举报</a><span class="line">|</span>
            <a href="#">联系我们</a>
          </p>
          <p class="right">
            <span class="sep">网易公司版权所有©1997-2022</span>
            <span>杭州乐读科技有限公司运营：</span>
            <a href="#" class="alink alink-v"> 浙网文[2021] 1186-054号 </a>
          </p>
          <p class="right">
            <a href="#" class="alink"
              >粤B2-20090191-18&nbsp;&nbsp;工业和信息化部备案管理系统网站&nbsp;&nbsp;</a
            >
            <SvgIcon icon="icon-jinghui" class="icon"></SvgIcon
            ><a href="#" class="alink">浙公网安备 33010902002564号 </a>
          </p>
          <p class="right">
            <span class="sep">互联网宗教信息服务许可证：浙（2022）0000120</span
            ><span>监督举报邮箱：51jubao@service.netease.com</span>
          </p>
        </div>
        <ul class="enter">
          <li class="unit">
            <a href="#" class="logo logo1"></a>
            <span class="tt tt1"></span>
          </li>
          <li class="unit">
            <a href="#" class="logo logo2"></a>
            <span class="tt tt2"></span>
          </li>
          <li class="unit">
            <a href="#" class="logo logo3"></a>
            <span class="tt tt3"></span>
          </li>
          <li class="unit">
            <a href="#" class="logo logo4"></a>
            <span class="tt tt4"></span>
          </li>
          <li class="unit">
            <a href="#" class="logo logo5"></a>
            <span class="tt tt5"></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Foot",
};
</script>

<script lang="ts" setup>
import SvgIcon from "@/components/SvgIcon/index.vue";
</script>

<style scoped>
.g-ft {
  height: 172px;
  overflow: hidden;
  border-top: 1px solid #d3d3d3;
  background: #f2f2f2;
}
.m-ft {
  width: 980px;
  margin: 0 auto;
}
.copy {
  float: left;
  /* width: 535px; */
  width: 542px;
  padding-top: 15px;
  line-height: 24px;
}
.link a {
  font-size: 12px;
  color: #999;
}
.line {
  margin: 0 4px 0 4px;
  color: #c2c2c2;
  font-size: 12px;
}
.right {
  color: #666;
  font-size: 12px;
  box-sizing: border-box;
}
.sep {
  margin-right: 14px;
}
.alink {
  color: #666;
  cursor: pointer;
}
.alink-v {
  text-decoration: underline;
}
.alink:hover {
  text-decoration: underline;
}
.icon {
  width: 17px;
  height: 17px;
  color: red;
}
.enter {
  width: 420px;
  margin-top: 33px;
  float: right;
  display: flex;
  justify-content: space-between;
}
.unit {
  float: left;
  width: 60px;
  height: 70px;
  margin-left: 0;
  text-align: center;
  color: #666;
}
.logo {
  display: block;
  float: none;
  width: 50px;
  height: 45px;
  margin: 0 auto;
  background: url(@/assets/icon/footLogo.png) no-repeat;
  background-size: 110px 552px;
}
.logo1 {
  background-position: -63px -456.5px;
}
.logo2 {
  background-position: -63px -101px;
}
.logo3 {
  background-position: 0px 0px;
}
.logo4 {
  background-position: -60px -50px;
}
.logo5 {
  background-position: 0px -101px;
}
.tt {
  display: inline-block;
  margin: 5px 5px 0;
  width: 52px;
  height: 14px;

  background: url(@/assets/icon/footText.png) no-repeat;
  background-size: 180px 139px;
}
.tt1 {
  background-position: 0 -108px;
  margin-left: -6px;
  width: 72px;
}
.tt2 {
  background-position: -1px -91px;
}
.tt3 {
  background-position: 0px 0px;
}
.tt4 {
  background-position: 0px -54px;
}
.tt5 {
  background-position: -1px -72px;
}
</style>
